<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-10-08 18:36:58
-->
<template>
  <div id="left2" style="height: 95%"></div>
</template>

<script>
import { Line } from "@antv/g2plot";
export default {
  data() {
    return {};
  },
  methods: {
    myChart() {
      const data = [
        { data: "1.20", 数量: 33364 },
        { data: "3.20", 数量: 0 },
        { data: "4.20", 数量: 321 },
        { data: "5.20", 数量: 15011 },
        { data: "6.20", 数量: 26572 },
        { data: "7.20", 数量: 600 },
        { data: "8.20", 数量: 657 },
        { data: "9.20", 数量: 28409 },
        { data: "10.20", 数量: 68802 },
      ];

      const line = new Line("left2", {
        data,
        xField: "data",
        yField: "数量",
        label: {},
        point: {
          size: 5,
          shape: "diamond",
          style: {
            fill: "white",
            stroke: "#5B8FF9",
            lineWidth: 2,
          },
        },
        tooltip: { showMarkers: false },
        state: {
          active: {
            style: {
              shadowBlur: 4,
              stroke: "#000",
              fill: "red",
            },
          },
        },
        interactions: [{ type: "marker-active" }],
      });

      line.render();
    },
  },
  created() {},
  mounted() {
    this.myChart();
  },
};
</script>